import React from 'react';
import styled from 'styled-components';

const SectionContainer = styled.div`
  background-color: #181818;
  flex-direction: column;
  padding: 2rem;
  display: flex;
`;

const SectionHeader = styled.div`
  margin: 0 0;
`;

const SectionTitle = styled.label`
  text-transform: uppercase;
  font-family: 'Open sans', sans-serif;
  font-weight: regular;
  font-size: 30px;
  color: #c4c4c4;
`;

const SectionContent = styled.div`
  margin: 2rem 0;
`;

const SectionParagraph = styled.p`
  text-align: justify;
  font-family: "Open sans", sans-serif;
  font-size: 20px;
  margin: 1rem 0;
  color: #c4c4c4;
`;

export const Section = (props) => {
  return (
    <SectionContainer>
      <SectionHeader>
        <SectionTitle>[- { props.title } -]</SectionTitle>
      </SectionHeader>
      <SectionContent>

        { props.paragraph.map(p => {
          return <SectionParagraph id={ props.id }>{ p }</SectionParagraph>
        }) }
      </SectionContent>
    </SectionContainer>
  );
}
